
<!-- 市场服务减碳编辑业务实现-->
<template>
  <div class="app-container">
    <div style="margin-right: 50px;">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
      <lxsh-common-table-tool-box :pageInfo="pageInfo"></lxsh-common-table-tool-box>
      <lxsh-common-search-condition :queryParam="queryParam" :searchConditionList="searchConditionList">
        <template v-slot:toolButton>
          <el-button class="filter-item" @click="handleSearch">搜索</el-button>
          <el-button class="filter-item" @click="handleReset">重置</el-button>
        </template>
      </lxsh-common-search-condition>
      <!-- 列表 start -->
      <vxe-grid ref="tableListRef" v-bind="gridOptions" @sort-change="handleSortChange" @page-change="handlePageChange" :loading="loading" :height="tableHeight">
        <!-- 可用按钮 start -->
        <template #reduceCount="{ row }">
          <vxe-input v-model="row.reduceCount"></vxe-input>
        </template>
        <!-- 可用按钮 end -->
        <!-- 操作列模板 start -->
        <template #operate="{ row }">
          <vxe-button type="text" @click="handleUpdateR(row)" v-if="!row.editStatus" v-permission="['cer:marketImpro:updateReduceCount']"><span class="default-button-font-color">减碳编辑</span></vxe-button>
          <vxe-button type="text" @click="handleSaveR(row)" v-else v-permission="['cer:marketImpro:updateReduceCount']"><span class="default-button-font-color">保存</span></vxe-button>
          <vxe-button type="text" @click="handleUpdate(row)" v-permission="['cer:marketImpro:update']"><span class="default-button-font-color">编辑</span></vxe-button>
          <span class="default-button-font-color" v-permission="['cer:marketImpro:update','cer:marketImpro:deleteByLogicBatch']">|</span>
          <el-popconfirm title="确定删除当前数据吗？" @confirm="handleDelete(row)">
            <template #reference>
              <vxe-button type="text" v-permission="['cer:marketImpro:deleteByLogicBatch']"><span class="default-button-font-color">删除</span></vxe-button>
            </template>
          </el-popconfirm>

        </template>

        <!-- 操作列模板 end -->
      </vxe-grid>
      <!-- 列表 end -->
    </div>
    <!--右侧按钮工具栏start-->
    <div class="table-right-tool-bar">
      <el-col style="margin-top: 30px;"></el-col>
      <el-col style="margin-top: 30px;text-align: center;" class="button-icon" v-permission="['cer:marketImpro:update']">
        <i class="button-icon iconfont icon-xinzeng" @click="handleCreate"></i>
      </el-col>
      <el-col style="margin-top: 30px;text-align: center;" v-permission="['cer:marketImpro:deleteByLogicBatch']">
        <i class="button-icon iconfont icon-shanchu" icon="el-icon-delete" @click="handleDeleteBatch"></i>
      </el-col>
      <el-col style="margin-top: 30px;text-align: center;">
        <el-upload v-model:file-list="fileList" class="upload-demo" :action="url" multiple :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed" :accept="'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" :before-upload="beforeUpload" :headers="myHeader" :show-file-list="false" :on-success="handleSuccess" :on-error="handleError">
          <el-button type="text"><i class="button-icon iconfont icon-upload"></i></el-button>
        </el-upload>
      </el-col>
      <el-col style="margin-top: 30px;text-align: center;">

        <el-button type="text" @click="exportExcel"><i class="button-icon iconfont icon-download"></i></el-button>
      </el-col>
    </div>
    <!--右侧按钮工具栏end-->
    <!-- 编辑组件 start-->
    <cer-market-impro-edit @editProcessSuccess="editProcessSuccess" :pageInfo="pageInfo" :isEditFormVisible="isEditFormVisible" :functionDistinguish="editFunctionType" v-if="isEditFormVisible"></cer-market-impro-edit>
    <!-- 编辑组件 end-->
  </div>
</template>
<script lang="ts" setup>
import CerMarketImproEdit from "./cer-market-impro-edit.vue";
import { hooksForCommonTable } from "hhlt-vue/src/components/Lxsh/Common/hooksForCommonTable";
import { ref, reactive, toRefs, onMounted, Ref, getCurrentInstance } from "vue";
import { VxeGridInstance, VXETable } from "vxe-table";
import cerMarketImproApi from "lxsh-cer-web-pc/src/api/cer/cer/cerMarketImproApi";
import { CerMarketImpro } from "lxsh-cer-web-pc/src/model/cer/cer/market-impro/cer-market-impro";
import { IExecuteData } from "hhlt-core/src/model/base/resultModel";
import { MessageBox } from "hhlt-vue/src/components/Lxsh/Common/Message/MessageBox";
import { systemUtils } from "hhlt-core/utils";
import { requestContextPath } from "lxsh-cer-web-pc/src/constants";
import { getToken } from "hhlt-vue/src/utils/session/sessionUtils";
const vueContext = getCurrentInstance();
//获取grid实例
const tableListRef: Ref<VxeGridInstance | undefined> = ref<VxeGridInstance>();
//初始化hooks
const {
  commonData,
  gridOptions,
  handleSortChange,
  handlePageChange,
  handleSearch,
  handleReset,
  handleDelete,
  handleUpdate,
  tableHeight,
  editProcessSuccess,
  handleCreate,
  handleDeleteBatch,
} = hooksForCommonTable<CerMarketImpro>(tableListRef);
//设置
commonData.pageInfo = {
  systemCode: "cer",
  pageCode: "cerMarketImpro",
  functionCode: "getListByPager",
  title: "市场服务减碳",
  params: {
    id: undefined,
  },
};
//返回vue界面需要使用到的data
const {
  loading,
  isEditFormVisible,
  editFunctionType,
  searchConditionList,
  queryParam,
  pageInfo,
} = toRefs(commonData);

let url =
  systemUtils.getContextPath<typeof requestContextPath>(
    requestContextPath,
    "cer"
  ) + "/cer/marketImpro/importExcel";
let myHeader = {
  Authorization: getToken(),
};
const fileList = ref<UploadUserFile[]>([]);



const beforeUpload = () => {
  loading.value = true;
};
const handleSuccess = (result: IExecuteData<String>) => {
  loading.value = false;
  if (result.success) {
    handleSearch();
  } else {
    MessageBox.error(result.msg);
  }
};
const exportExcel = () => {
  loading.value = false;
  cerMarketImproApi.exportExcel(
    queryParam.value,
    "市场服务减碳",
    (result: IExecuteData<String>) => {
      loading.value = false;
    }
  );
};

gridOptions.editConfig = {
  trigger: "manual",
  mode: "row",
};
const handleUpdateR = (rew: any) => {
  tableListRef.value?.setEditRow(rew);
  rew.editStatus = true;
};
const handleSaveR = (rew: any) => {
  console.log(rew, "=====点击保存");
  cerMarketImproApi.updateForm(rew, (restData) => {
    if (restData.success) {
      vueContext?.appContext.config.globalProperties.$message({
        message: "更新成功！",
        type: "success",
        duration:
          vueContext?.appContext.config.globalProperties.$messageConstants
            .messageConfig.WARN_MESSAGE_DURATION,
      });
      rew.editStatus = false;
      tableListRef.value?.clearEdit();
    } else {
      vueContext?.appContext.config.globalProperties.$message({
        message: "更新失败！" + restData.msg,
        type: "error",
        duration:
          vueContext?.appContext.config.globalProperties.$messageConstants
            .messageConfig.WARN_MESSAGE_DURATION,
      });
    }
  });
};
</script>
